<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浏览小说基本信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>浏览小说基本信息</legend>
    </fieldset>
    <div class = "admin-form">
        <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-left: 100px;">
            <el-form-item label="小说作者"   >
                <el-select v-model="form.authorId" placeholder="请选择">
                    <el-option
                            v-for="item in author"
                            :key="item.authorId"
                            :label="item.authorName"
                            :value="item.authorId">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="小说类型">
                <el-select v-model="form.categoryId" placeholder="请选择">
                    <el-option
                            v-for="item in category"
                            :key="item.categoryId"
                            :label="item.categoryName"
                            :value="item.categoryId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="admin-table">
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 1350px;margin-left: 20px ;   ">
                <el-table-column
                        fixed
                        prop="novelId"
                        label="ID"
                        width="80" >
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="小说书名"
                        width="150">

                </el-table-column>
                <el-table-column
                        prop="statu"
                        label="状态"
                        width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.statu == 1">连载中</span>
                        <span v-else-if="scope.row.statu == 0">已完结</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="频道"
                        width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.sex == 1">男频</span>
                        <span v-else-if="scope.row.sex == 0">女频</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="publishDate"
                        label="发表时间"
                        width="100">

                </el-table-column>
                <el-table-column
                        prop="coverImage"
                        label="封面"
                        width="150">
                    <template slot-scope="scope">

                        <img :src="scope.row.coverImage" style="width: 100px; height: 100px;">
                    </template>


                </el-table-column>

                <el-table-column
                        prop="introduction"
                        label="小说简介"
                        width="450">

                </el-table-column>
                <el-table-column
                        prop="nmoney"
                        label="打赏金额"
                        width="80">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click="dlt(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>



</div>




<!-- 引入 Vue.js 和 Element UI 的脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>


<script>

   var v = new Vue({
        el: '#app',
        data() {
            return {

                form: {
                    authorId: '',
                    categoryId: ''
                },
                author: [],
                category: [],
                tableData: [{
                    novelId: '',
                    title: '',
                    statu: '',
                    sex:'',
                    publishDate: '',
                    coverImage: '',
                    introduction: '',
                    nmoney: '0',
                }],


            }

        },
        mounted() {
            axios.get('author/select').then(res => {
                this.author = res.data;

            });
            axios.get('category/select').then(res => {
                this.category = res.data;

            });

            this.select();





        },
        methods: {

            onSubmit() {
                axios.post('novel/selectlist', this.form).then(res => {

                    this.tableData = res.data;

                });


            },
            handleClick(row) {
                window.location.href = "upGoods.html#" + row.novelId;

            },
            dlt(row){
                row.dlt = 0;
                axios.post('novel/delete',row).then(res => {
                    if(res.data ==    1){
                        alert("删除成功");
                        this.select();
                    }
                });

            },
            select() {
                axios.get('novel/select').then(res => {
                    this.tableData = res.data;

                });
            }




        }
    });




</script>

</body>
</html>